<template>
	<div id="devicelist" class="same-change-oldstyle">
		<div class="same-head-box">
			<div class="saem-seat-box">
				<div class="saem-seat-left">
					<span>当前位置：</span>
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item>设备中心</el-breadcrumb-item>
						<el-breadcrumb-item :to="{ path: '/librarylist' }">主板库管理</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="saem-seat-right">
					<button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
					<!-- <button class="same-search-btns" @click="returnBack">返回</button> -->
				</div>
			</div>
			<div class="same-search-box">
				<div>
					<div class="same-search-left">
						<div class="same-left-one">
							<span class="same-search-span">设备编号:</span>
							<el-input size="medium" v-model="equipment_number" placeholder="请输入设备编号" style="width: 160px;"></el-input>
						</div>
						<div class="same-left-one" v-if="!moveShow">
							<div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">更多查询条件<i
									:class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
							<el-button type="primary" size="medium" @click="serach()">搜索</el-button>
							<el-button type="info" size="medium" @click="reset()">重置</el-button>
						</div>
					</div>
					<div class="same-search-right"></div>
				</div>
				<!-- 搜索更多 -->
				<div>
					<div class="same-search-left new-sear-height" ref="leftHeight">
						<div class="same-left-one">
							<span class="same-search-span">安装状态:</span>
							<el-select size="medium" v-model="status" placeholder="请选择" style="width: 160px;">
								<el-option v-for="item in statusOptions" :key="item.value" :label="item.name" :value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="same-left-one" :class="[moveShow?'':'new-sear-opacity']">
							<div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">收起更多查询条件<i
									:class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
							<el-button type="primary" size="medium" @click="serach()">搜索</el-button>
							<el-button type="info" size="medium" @click="reset()">重置</el-button>
						</div>
					</div>
					<div class="same-search-right"></div>
				</div>
			</div>
		</div>

		<div class="same-table-box">
			<div class="tabel_header">
				<h4 class="same-title-box">主板库管理
					<div class="same-search-total"></div>
				</h4>
				<div class="same-left-one"> 
					<el-button type="primary" size="mini" @click="addother()" icon="el-icon-circle-plus">主板入库</el-button>
				</div>
			</div>
			<div class="common-table-outer">
				<el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
					:data="tableData" stripe>
					<el-table-column header-align="center"  width="70" align="center" label="序号">
						<template slot-scope="scope">
							{{scope.$index+1+(pageNo-1)*pageSize}}
						</template>
					</el-table-column>
					<el-table-column align="center" prop="id" width="120" label="ID">
					</el-table-column>
					<el-table-column align="center" prop="equipment_number" label="设备编号">
					</el-table-column>
					<el-table-column align="center" show-overflow-tooltip prop="mainboard_type_name" label="主板类型">
					</el-table-column>
					<el-table-column align="center" prop="ctime" label="入库时间">
					</el-table-column>
					<el-table-column align="center" prop="address" label="状态">
						<template slot-scope="scope">
							<el-tag size="mini" type="success" v-if="scope.row.status == 1">已安装</el-tag>
							<el-tag size="mini" type="warning" v-else-if="scope.row.status == 0">未安装</el-tag>
							<span v-else>--</span>
						</template>
					</el-table-column>
					<template slot="empty" v-if="isLoad">
						<div class="new-no-data-show">
							<img src="../../assets/images/no-data.png" alt="">
							<div>暂无相关数据</div>
						</div>
					</template>
				</el-table>

				<div class="same-page-inShow" v-if="tableData.length > 0 && isLoad">
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page.sync="pageNo" :page-sizes="pageSizesList" :page-size="pageSize"
						layout="total, prev, pager, next, jumper, sizes" :total="totalDataNumber"></el-pagination>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import { regionDataPlus } from 'element-china-area-data';
	export default {
		name: 'devicelist',
		data: function () {
			return {
				statusOptions: [
					//安装select选项
					{
						value: '全部',
						name: ''
					},
					{
						value: 0,
						name: '未安装'
					},
					{
						value: 1,
						name: '已安装'
					}
				],
				status: '', //安装状态
				pageNo: 1,
				pageSize: 15,
				pageSizesList: [15, 30, 40, 50],
				tableData: [], // 返回的结果集合
				totalDataNumber: 0, // 数据的总数,-----
				time: '',
				stateoption: [
					{
						value: 0,
						label: '全部状态'
					},
					{
						value: 1,
						label: '在线'
					},
					{
						value: 2,
						label: '离线'
					}
				],
				state: this.$route.query.stat_es == 2 ? 2 : '',
				noticeoption: [
					{
						value: '1',
						label: '正常'
					},
					{
						value: '2',
						label: '低水位'
					},
					{
						value: '3',
						label: '高水位'
					},
					{
						value: '4',
						label: '低压力'
					},
					{
						value: '5',
						label: '高压力'
					}
				],
				notice: '',
				options: regionDataPlus,
				address: [],
				equipment_number: '',
				province: '',
				city: '',
				area: '',
				loading: true, //加载动画
				isLoad: false, //是否加载
				checkAll: false,
				checkedEq: [],
				userAgent: '',
				Province: [],
				City: [],
				Area: [],
				Village: [],
				province_id: '',
				city_id: '',
				area_id: '',
				village_id: '',
				village_name: '',
				equipment_id: '',

				moveBtn: false,//是否暂时更多查询条件按钮按钮 搜索条件控制
				moveShow: false,//是否开启动画
				scrollHeight: '',//需要监听的高度
			};
		},
		// 初始化执行
		created: function () {
			this.getProvince();
			var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
			this.userAgent = userAgent;
			var that = this;
			if (locache.get('deviceListPage') != null) {
				that.pageNo = locache.get('deviceListPage');
			}
			if (locache.get('deviceListPageSize') != null) {
				that.pageSize = locache.get('deviceListPageSize');
			}
			var page = that.pageNo; // 当前页
			var pageSize = that.pageSize; // 每页条数
			that.equipment_id = this.$route.query.equipment_id; // 接收设备编号
			that.equipment(page, pageSize); // 获取设备列表数据
		},
		inject: [
			'reload'
		],
		methods: {
			
			RefreshFun() {
				// 调用reload方法，刷新整个页面
				this.reload()
			},
			//返回
			returnBack() {
				this.$router.back(-1);
			},
			searchVillage() { },
			chooseProvince(val) {
				console.log(val);
				this.getCity(val);
				this.city_id = '';
				this.area_id = '';
				this.village_name = '';
			},
			chooseCity(val) {
				this.getArea(val);
				this.area_id = '';
				this.village_name = '';
			},
			chooseArea(val) {
				this.getVillage(val);
				this.village_name = '';
			},
			//三级联动-省
			getProvince() {
				this.$post({
					url: 'Partner/Village/getEqProvince',
					data: {},
					success: data => {
						this.Province = data.data;
					}
				});
			}, //三级联动-市
			getCity(id) {
				this.$post({
					url: 'Partner/Village/getEqCity',
					data: {
						id: id
					},
					success: data => {
						this.City = data.data;
					}
				});
			}, //三级联动-区/县
			getArea(id) {
				this.$post({
					url: 'Partner/Village/getEqArea',
					data: {
						id: id
					},
					success: data => {
						this.Area = data.data;
					}
				});
			}, //园区列表
			getVillage(id) {
				this.$post({
					url: 'Partner/Village/getAllVillage',
					data: {
						province: this.province_id,
						city: this.city_id,
						area: this.area_id,
						village_name: ''
					},
					success: data => {
						this.Village = data.data;
					}
				});
			},
			handleChange(value) { },
			//编辑
			edit: function (id) {
				this.$router.push({ path: '/edit', query: { id: id } });
			},
			addother: function () {
				this.$router.push({ path: '/adddevicelibrary' });
			},
			//更多信息
			more: function (val, id) {
				this.$router.push({
					path: '/moreinformation',
					query: { equipment_number: val, id: id }
				});
			},

			// 每页
			handleSizeChange(val) {
				var that = this;
				that.pageNo = 1;
				locache.set('deviceListPageSize', val);
				that.pageSize = val; // 当前每页显示条数
				that.equipment(that.pageNo, val); // 获取设备列表数据
			},
			// 分页
			handleCurrentChange(val) {
				var that = this;
				that.pageNo = val;
				var pageSize = that.pageSize; // 每页条数
				locache.set('deviceListPage', val);
				that.equipment(val, pageSize); // 获取设备列表数据
			},
			//重置查询
			reset() {
				this.equipment_number = '';
				this.status = '';
				this.pageNo = 1;
				this.equipment(this.page, this.pageSize);
			},
			// 获取主板库
			equipment: function (page, pageSize) {
				this.loading = true; //打开loading动画
				this.isLoad = false;
				var that = this;
				// ajax请求
				that.$post({
					url: 'Partner/Equipment/libraryList',
					data: {
						page: page,
						pageSize: pageSize,
						equipment_number: this.equipment_number,
						status: this.status === 0 ? 1 : this.status === 1 ? 2 : ''
					},
					success: data => {
						this.loading = false; //关闭动画
						this.isLoad = true;
						if (data.code == 1000) {
							that.tableData = []; // 清空数据
							$.each(data.data.libraryList, function () {
								this.checked = false;
								that.tableData.push(this);
							});
							that.totalDataNumber = Number(data.data.count); // 总的数据
						} else {
							that.tableData = []; // 清空数据
						}
					}
				});
			},
			// 搜索事件
			serach: function () {
				var that = this;
				that.equipment_number = that.equipment_number;
				that.state = that.state;
				that.notice = that.notice;
				that.province = that.address[0];
				that.city = that.address[1];
				that.area = that.address[2];
				that.village_name = that.village_name;
				that.pageNo = 1; // 当前页
				locache.set('deviceListPage', that.pageNo);
				that.equipment(that.pageNo, that.pageSize); // 获取设备列表数据
			},
			//点击弹出二维码

			openCode: function (qrcode, base64_qr, sn) {
				var that = this;
				if (base64_qr == '') {
					that.$message({
						showClose: true,
						message: '二维码生成中页面自动刷新',
						duration: 1000,
						onClose: function () {
							that.$post({
								url: 'Partner/Equipment/mkQR',
								data: { equpment_sn: sn },
								success: data => {
									that.equipment();
								}
							});
						}
					});
				} else {
					var content = '<img src="' + base64_qr + '" />';
					that.$alert(content, '下载二维码', {
						dangerouslyUseHTMLString: true,
						showClose: false,
						showConfirmButton: true,
						showCancelButton: true,
						center: true,
						cancelButtonText: '取消',
						confirmButtonText: '下载二维码',
						cancelButtonClass: 'cancelButton',
						confirmButtonClass: 'confirmButton'
					})
						.then(() => {
							that.download(qrcode, base64_qr);
						})
						.catch(() => { });
				}
			},
			//全选
			handleCheckAllChange: function (val) {
				var that = this;
				that.checkedEq = [];
				if (val == true) {
					that.tableData.forEach(function (item) {
						if (item.base64_qr != '' && item.base64_qr != null) {
							item.checked = true;
							var code = {
								qrcode: item.equipment_number,
								base64_qr: item.base64_qr
							};
							that.checkedEq.push(code);
						}
					});
				} else {
					that.tableData.forEach(function (item) {
						item.checked = false;
					});
					that.checkedEq = [];
				}
			},
			//单选
			handleCheckedChange: function (i) {
				var that = this;
				if (i.checked == true && i.base64_qr != '' && i.base64_qr != null) {
					var code = { qrcode: i.equipment_number, base64_qr: i.base64_qr };
					that.checkedEq.push(code);
				} else {
					var result = [];
					that.checkedEq.forEach(function (item) {
						if (i.equipment_number != item.qrcode && item.base64_qr != '') {
							result.push(item);
						}
					});
					that.checkedEq = result;
				}
				var k = 0; //
				that.tableData.forEach(function (item) {
					if (item.checked == false) {
						k++;
					}
				});

				if (k == 0) {
					that.checkAll = true;
				} else {
					that.checkAll = false;
				}
			},
			batchExport: function () {
				this.$message.warning('正在努力开发中，请稍候');
			},
			//多图下载
			openAllCode: function () {
				var that = this;
				if (that.checkedEq.length == 0) {
					that.$message.warning('请至少选中一个设备，才能批量下载二维码');
					return false;
				}
				that.checkedEq.forEach(function (item) {
					that.sleep(500);
					that.download(item.qrcode, item.base64_qr);
				});
			},
			//单张图片
			download: function (src, base64_qr) {
				if (base64_qr != '' && base64_qr != null) {
					let link = document.createElement('a');
					link.style.display = 'none';
					link.href = base64_qr;
					link.setAttribute('download', src);
					document.body.appendChild(link);
					link.click();
				}
			},
			//图片下载间隔时间
			sleep: function (d) {
				for (var t = Date.now(); Date.now() - t <= d;);
			},
			//此处获取高度必须在dom元素创建完成之后才能获取
			gitHeight() {
				//  let clientHeight=this.$refs.leftHeight.clientHeight;
				let scrollHeight = this.$refs.leftHeight.scrollHeight;
				this.scrollHeight = scrollHeight;
				scrollHeight <= 30 ? this.moveBtn = false : this.moveBtn = true;

			},
			openMore() {
				this.moveShow = !this.moveShow;
				this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
			},
		},
		mounted() {
			this.gitHeight();
			//监听高度变化 
			var that = this;
			window.addEventListener("resize", function () {
				let scrollHeight = that.$refs.leftHeight && that.$refs.leftHeight.scrollHeight ? that.$refs.leftHeight.scrollHeight : that.scrollHeight;
				that.scrollHeight = scrollHeight;
			});
		},
		watch: {
			// 如果 `scrollHeight` 发生改变，这个函数就会运行 此处是为了防止用户缩小屏幕导致页面显示不全
			scrollHeight: function (val) {
				this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
			}
		},
		activated() {
			if (this.$route.meta.isUpdate) {
				this.tableData = [];
				this.equipment(this.pageNo, this.pageSize);
				this.$route.meta.isUpdate = false;
			}
		},

    beforeRouteEnter (to, from, next) {
      let updates = ["/adddevicelibrary"]
			if (updates.includes(from.path)) {
				to.meta.isUpdate = true;
			}
      next();
		},
		beforeRouteLeave(to, from, next) {
			let updates = ["/adddevicelibrary"];
			if (!updates.includes(to.path)) {
				from.meta.keepAlive = false; 
			} else {
				from.meta.keepAlive = true;
			}
			next();
		}
	};
</script>
<style>
	.tabel_header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	#devicelist {
		width: 100%;
		height: 100%;
		background: #ffffff;
	}
</style>